 <template>
  <div>
    <el-alert
      v-if="!isActivate"
      show-icon
      title="您暂无签约课程，无法使用该功能，请联系邀请机构进行签约"
      :closable="false"
      type="warning"
    ></el-alert>

    <el-form :model="formData" ref="formData" label-width="200px">
      <el-card>
        <div slot="header" class="clearfix">
          <span>合同内容</span>
        </div>

        <div class="card-container">
          <!-- 签约课程 -->
          <el-form-item label="选择课程">
            <div v-if="courses.length !== 0">
              <el-radio-group @change="changeCourse" v-model="courseIndex">
                <el-radio
                  v-for="(item, index) in courses"
                  :key="item.index"
                  :label="index"
                >{{item.courseName}}</el-radio>
              </el-radio-group>

              <div class="course-container">
                <div slot="header" class="clearfix">
                  <span>当前选择课程：{{courses[courseIndex] && courses[courseIndex].courseName}}</span>
                </div>
                <div class="item">
                  <span class="label-text">已签约基础提成比例为：</span>
                  {{courses[courseIndex] && courses[courseIndex].percentage * 100}}%
                </div>
                <div class="item">
                  <span class="label-text">课程价格：</span>
                  <div class="price" v-for="(item, index) in price" :key="index">
                    {{item.time}}
                    <span>￥{{item.amount}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>无课程</div>
          </el-form-item>

          <!-- 邀约机构 -->
          <el-form-item label="可邀约机构">
            <div v-if="organiztions.length !== 0">
              <el-radio-group v-model="organiztionIndex">
                <el-radio
                  v-for="(item, index) in organiztions"
                  :key="item.index"
                  :label="index"
                  class="radio-item"
                >{{item.infoName}}</el-radio>
              </el-radio-group>
            </div>
            <div v-else>无可邀约机构</div>
          </el-form-item>

          <!-- 邀约机构基础提成比例 -->
          <el-form-item
            label="提成比例"
            prop="percentage"
            :rules="[{required: true, message: '请输入基础提成比例', trigger: 'blur'},{validator: validatePass, trigger: 'blur'}]"
          >
            <el-input
              class="input-item"
              v-model.number="formData.percentage"
              clearable
              placeholder="基础提成比例（不能低于30%）"
            >
              <i slot="append">%</i>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              style="margin: 20px auto "
              @click="confimForm('formData')"
              type="primary"
              class="add-style"
            >发起合同邀约</el-button>
          </el-form-item>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {
  getApplyOrgId,
  getConfirmOrgId,
  getInviteOrgAndNotContract,
  createContract
} from "api/getData";
import { getOwnerCourse, getCoursePrice } from "api/course";
import { tanslateTime } from "src/util/time.js";

export default {
  data() {
    let validatePass = (rule, value, callback) => {
      if (value <= 30) {
        callback(new Error("提成比例不得低于30%"));
      } else if (value >= this.courses[this.courseIndex].percentage * 100) {
        callback(new Error("提成比例不得高于课程基础提成比例"));
      } else {
        callback();
      }
    };
    return {
      searchCourse: "",
      courses: [], //所有课程
      courseIndex: 0, //当前选择的课程Index
      organiztions: [], //所有的组织机构
      organiztion: "",
      organiztionIndex: [], //当前选择的组织机构
      price: "", //课程价格
      isActivate: true, // 是否可以发起合同
      currentCourse: "",

      formData: {
        percentage: "", //基础提成比例
        floatStageFirBar: "", //销售总额
        floatStageFirPercentage: "", //初级提成比例
        floatStageSecBar: "", //销售总额
        floatStageSecPercentage: "" //高级浮动提成
      },
      validatePass: validatePass
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    confimForm() {
      if (this.courseIndex < 0) {
        this.$message.error("请选择课程");
        return;
      }
      if (this.organiztionIndex < 0) {
        this.$message.error("请选择机构");
        return;
      }
      this.$refs.formData.validate(valid => {
        if (valid) {
          let data = this.formData;
          data.conConfirmerId = this.organiztions[this.organiztionIndex].id; // 被邀请企业id
          data.courseId = this.courses[this.courseIndex].courseId; // 课程id
          data.percentage = data.percentage / 100;

          createContract(data).then(res => {
            this.$message.success("合同邀请已发出，请联系相关企业签约");
            this.$refs.formData.resetFields(); //数据重置
            this.courseIndex = 0;
            this.organiztionIndex = 0;
          });
        } else {
          return false;
        }
      });
    },
    init() {
      getOwnerCourse().then(res => {
        if (res.length === 0) {
          this.isActivate = false;
        }
        this.courses = res.map(item => {
          item.value = item.courseName;
          return item;
        });
        this.getPrice(this.courses[0].courseId);
        this.getOrg(this.courses[0].courseId);
      });
    },
    getPrice(id) {
      getCoursePrice(id).then(res => {
        this.price = res.map(item => {
          item.time = tanslateTime(
            item.effectiveLength,
            item.effectiveLengthUnit
          );
          return item;
        });
        console.log(this.price);
      });
    },
    getOrg(id) {
      getInviteOrgAndNotContract(id).then(res => {
        if (res.length === 0) {
          this.$message.error("暂无可邀约机构", "提示");
          return;
        }
        this.organiztions = res.map(item => {
          item.value = item.infoName;
          return item;
        });
      });
    },
    // ---------------选择课程---------------------------
    changeCourse(index) {
      this.getPrice(this.courses[index].courseId);
      this.getOrg(this.courses[index].courseId);
    }
    // ---------------选择课程---------------------------
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.card-style {
  margin: 10px;
}

.input-item {
  margin: 10px 0;
  width: 400px;
}

.radio-item{
  margin-bottom: 20px;
  margin-right: 30px;
  min-width: 200px;
}

.course-container {
  margin: 20px;
  width: 500px;

  .item {
    margin: 5px 0;
  }
  .label-text {
    @include sc(14px, #666);
  }
  .price {
    margin: 5px 20px;
  }
}
</style>
